<!--
 * @description: 
 * @Date: 2023-03-02 11:38:41
 * @example: 
 * @params: 
-->
<template>
  <div class="map_container">
    <div id="app">
      <!-- https://docs.mapbox.com/api/maps/styles/ -->
    </div>
  </div>
</template>

<script>
const mapboxgl = require("mapbox-gl"); //引入组件
// import MapboxLanguage from "@mapbox/mapbox-gl-language";
export default {
  name: "App",
  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiemhhbmdrYWk2NjYiLCJhIjoiY2xpNDM2MHg2MWlvYTNjbXZzNWFxMG1lMSJ9.P0wAP6yFRsTooxqSxx7Qeg"; //这里请换成自己的token
      const map = new mapboxgl.Map({
        container: "app", // container id 绑定的组件的id
        style: "mapbox://styles/mapbox/dark-v11", //地图样式，可以使用官网预定义的样式,也可以自定义
        center: [114.06980926876878, 22.53430950353102], // 初始坐标系，这个是南京建邺附近
        zoom: 11, // starting zoom 地图初始的拉伸比例
        pitch: 70, //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: -13.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
        antialias: true, //抗锯齿，通过false关闭提升性能
      });
      // const geocoder = new MapboxGeocoder({
      //   accessToken: mapboxgl.accessToken,
      //   language: "Zh", // Specify the language as German.
      //   mapboxgl: mapboxgl,
      // });
      // map.addControl(geocoder);
      /** 点击获取坐标点或地址 */
      map.on("click", (e) => {
        console.log("hellop");
        const features = map.queryRenderedFeatures(e.point);
        if (features.length === 0) {
          return;
        }
        let address = "";
        const { lng } = e.lngLat;
        const { lat } = e.lngLat;
        console.log(lng, lat);
        if (Object.keys(features[0].properties).includes("name")) {
          address = features[0].properties.name;
        } else {
          address = `[ ${lng}, ${lat} ]`;
        }
        this.address = address;

        // console.log(features);
        console.log(address);
        console.log(e);
        /** 根据点击的坐标添加mark */
        // marker.setLngLat(e.lngLat);
        // marker.addTo(map);
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
::v-deep .mapboxgl-ctrl-logo {
  display: none !important;
}
::v-deep .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
   display: none !important;
}
.map_container {
  width: 100%;
  height: 100vh;
  position: relative;
  #map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .mapboxgl-canvas {
      outline: none;
    }
    // 隐藏mapbox商标
    .mapboxgl-ctrl-logo {
      display: none;
    }
  }
}
</style>
